{% extends "base.html" %}

{% block content %}

    <div class="yui-gf" id="message-input">
        <div class="yui-u first">
            <div id="online">
                <h3>
                    Adam is
                    {% if online %}
                        online.
                    {% else %}
                        offline.
                    {% endif %}
                </h3>
            </div>
        </div><!--// .yui-u -->

        <div class="yui-u">
            <form action="/chat" method="post" autocomplete="off">
                <div class="yui-u first">
                    <textarea id="message-body" name="body">Type your message here and press Enter.</textarea>
                </div>
            </form>
        </div><!--// .yui-u -->
    </div><!--// .yui-gc -->

    <div id="after" style="display: none;">{{ now }}</div>

    <div id="messages">
        {% for message in messages %}
            <div class="yui-gf message">
                <div class="yui-u first">
                    <h2>{{ message.sender }}</h2>
                </div><!--// .yui-u -->
                <div class="yui-u">
                    <p class="enlarge {{ message.sender.lower }}">
                        {{ message.body }}
                    </p>
                </div><!--// .yui-u -->
            </div><!--// .yui-gf -->
        {% endfor %}

        <div class="yui-gf message">
            <div class="yui-u first">
                <h2>Adam</h2>
            </div><!--// .yui-u -->
            <div class="yui-u">
                <p class="enlarge adam">
                    {% if online %}
                        Hello, this is Adam.  I&rsquo;m online!  Type a message
                        to chat with me.
                    {% else %}
                        Hello, this is Adam.  I&rsquo;m not currently online.
                        But type a message, and I&rsquo;ll receive it via
                        email.
                    {% endif %}
                </p>
            </div><!--// .yui-u -->
        </div><!--// .yui-gf -->

    </div>

{% endblock %}
